<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
    <!--
        TO DO:

        - Add JQuery integration for preview.
        - Add AJAX live generation.
        - Add Preview and relative HTML panels.
    -->
    <title>CSS Grid Builder</title>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="false" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="description" content="Logic CSS framework : CSS Grid Builder Form" />
    <link rel="stylesheet" type="text/css" href="../logicss/common.css" media="all" />
    <style type="text/css" media="screen">
        @import "../logicss/font/sans2.css";
        @import "../logicss/typography/small.css";
        @import "../logicss/form/basic.css";
        @import "../logicss/grid/e24m.css";

        body
        {
            background:     #2e3436;
        }
        #header
        {
            margin:         1em 0;
        }
        #form
        {
            border:         4px solid #888a85;
            background:     #fafafa;
            color:          #2e3436;
            padding-bottom: 1em;
        }
        #footer, a
        {
            color:          #888a85;
        }
        #footer p
        {
            text-align:     right;
        }
    </style>
</head>

<body><div id="container" class="content">
<div id="header">
    <a href="http://logicss.googlecode.com"><img src="../gfx/logo.gif" alt="Logic CSS framework" /></a>
</div>
<div id="form">
    <form action="grid_builder.php" method="post" class="w20 pl1">
    <fieldset>
    <legend>Grid Builder Form</legend>
    <ul>
        <li><label for="name">NAME:</label>
            <input type="text" id="name" name="name" />
        </li>
        <li><label>LAYOUT:</label>
            <span>
                <input type="radio" value="elastic" name="layout" id="layout_elastic" /><label for="layout_elastic">Elastic <em>em</em></label>
                <input type="radio" value="liquid" name="layout" id="layout_liquid" /><label for="layout_liquid">Liquid <em>%</em></label>
                <input type="radio" value="fixed" name="layout" id="layout_fixed" checked="checked" /><label for="layout_fixed">Fixed <em>px</em></label>
            </span>
        </li>
        <li><label for="columns">COLUMNS:</label>
            <input type="text" id="columns" name="columns" value="24" size="3" />
        </li>
        <li><label for="width">GRID WIDTH:</label>
            <input type="text" id="width" name="width" />
        </li>
        <li><label for="col_width">COLUMN WIDTH:</label>
            <input type="text" id="col_width" name="col_width" />
        </li>
        <li><label>H-ALIGN:</label>
            <span>
                <input type="radio" value="left" name="h-align" id="h-align_left" /><label for="h-align_left">Left</label>
                <input type="radio" value="center" name="h-align" id="h-align_center" checked="checked" /><label for="h-align_center">Center</label>
                <input type="radio" value="right" name="h-align" id="h-align_right" /><label for="h-align_right">Right</label>
            </span>
        </li>
        <!--<li><label>V-ALIGN:</label>
            <ol>
                <li><input type="radio" value="top" name="v-align" id="v-align_top" checked="checked" /><label for="v-align_top">Top</label></li>
                <li><input type="radio" value="middle" name="v-align" id="v-align_middle" /><label for="v-align_middle">Middle</label></li>
                <li><input type="radio" value="bottom" name="v-align" id="v-align_bottom" /><label for="v-align_bottom">Bottom</label></li>
            </ol>
        </li>-->
        <li><label>SPACING STYLE:</label>
            <span>
                <input type="radio" value="margin" name="spacing" id="spacing_margin" checked="checked" /><label for="spacing_margin">Margin</label>
                <input type="radio" value="padding" name="spacing" id="spacing_padding" /><label for="spacing_padding">Padding</label>
                <input type="radio" value="none" name="spacing" id="spacing_none" /><label for="spacing_none">None</label>
            </span>
        </li>
        <li><label for="spacing_value">SPACING WIDTH:</label>
            <input type="text" id="spacing_value" name="spacing_value" size="5" value="auto" />
        </li>
        <li><label>SPACING SIDES:</label>
            <span>
                <input type="radio" value="left" name="spacing_sides" id="spacing_left" /><label for="spacing_left">Left</label>
                <input type="radio" value="both" name="spacing_sides" id="spacing_both" checked="checked" /><label for="spacing_both">Both</label>
                <input type="radio" value="right" name="spacing_sides" id="spacing_right" /><label for="spacing_right">Right</label>
            </span>
        </li>
        <li><label>SPANNING:</label>
            <span>
                <input type="radio" value="margin" name="spanning" id="spanning_margin" checked="checked" /><label for="spanning_margin">Margin</label>
                <input type="radio" value="padding" name="spanning" id="spanning_padding" /><label for="spanning_padding">Padding</label>
            </span>
        </li>
        <li><label for="gutter">GUTTER:</label>
            <input type="checkbox" value="true" name="gutter" id="gutter" />
        </li>
    </ul>
    </fieldset>
    <fieldset class="buttons"><ul>
        <li><input type="submit" value="BUILD !" /></li>
    </ul></fieldset>
    </form>
</div>
<div id="footer">
    <p>Copyright &copy; 2007 by <a href="http://marcodeltongo.com">Marco Del Tongo</a> et al. <a href="http://logicoder.com/logicss/LICENSE">Licensed under the MIT license.</a></p>
</div>
</div></body></html>
